<template>
  <div>
    <el-dialog title="成品镜片批量新增" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <el-divider content-position="left">必填项</el-divider>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" inline size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="制造商" prop="supplyName">
              <el-input v-model="dataForm.supplyName" readonly="readonly">
                <el-button slot="append" @click="getSupplyList">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品品种" prop="brandName">
              <el-input v-model="dataForm.brandName" readonly="readonly">
                <el-button slot="append" @click="getBrandList">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="dataForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品编号" prop="color">
              <el-input v-model="dataForm.color"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量单位" prop="unitType">
              <el-select v-model="dataForm.unitType">
                <el-option v-for="item in unitTypeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="材料分类" prop="lensMaterial">
              <el-select v-model="dataForm.lensMaterial">
                <el-option v-for="item in bizData.lensMaterial" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="球镜" prop="mirrorBall" label-width="100px">
              <el-row>
                <el-form-item label="下限" label-width="50px" prop="batchMirrorBallMin">
                  <el-select v-model="dataForm.batchMirrorBallMin">
                    <el-option v-for="item in mirrorBallOptions" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上限" label-width="50px" prop="batchMirrorBallMax">
                  <el-select v-model="dataForm.batchMirrorBallMax">
                    <el-option v-for="item in mirrorBallOptions" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="跨度" label-width="50px" prop="mirrorBallSpan">
                  <el-select v-model="dataForm.mirrorBallSpan">
                    <el-option v-for="item in bizData.spanData" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下加光" prop="toTheLight">
              <el-select v-model="dataForm.toTheLight">
                <el-option v-for="item in bizData.toTheLight" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="柱镜" prop="mirrorBall" label-width="100px">
              <el-row>
                <el-form-item label="下限" label-width="50px" prop="batchColumnMirrorMin">
                  <el-select v-model="dataForm.batchColumnMirrorMin">
                    <el-option v-for="item in columnMirrorOptions" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上限" label-width="50px" prop="batchColumnMirrorMax">
                  <el-select v-model="dataForm.batchColumnMirrorMax">
                    <el-option v-for="item in columnMirrorOptions" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="跨度" label-width="50px" prop="columnMirrorSpan">
                  <el-select v-model="dataForm.columnMirrorSpan">
                    <el-option v-for="item in bizData.spanData" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批号管理" prop="batchManagement">
              <el-radio-group v-model="dataForm.batchManagement">
                <el-radio :label="1" border>是</el-radio>
                <el-radio :label="0" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="收费项目" prop="payType">
              <el-select v-model="dataForm.payType" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.payType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="8"></el-col>
        </el-row>

        <el-divider content-position="left">非必填项</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="镜片分类" prop="photometricClassification">
              <el-select v-model="dataForm.photometricClassification" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.photometricClassification" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折射率" prop="refractiveIndex">
              <el-select v-model="dataForm.refractiveIndex" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.refractivityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="镜片功能" prop="lensFunction">
              <el-select v-model="dataForm.lensFunction" :disabled="this.type == 'check'">
                <el-option v-for="item in lensFunction" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">价格项</el-divider>
        <el-row v-for="(item,index) in this.priceGroup" :key="index">
          <el-col :span="3" style="text-align: center;">
            <el-form-item label-width="0"> {{item.priceGroupName}} </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="税率" :prop="'list.'+index+'.taxRate'" :rules="productGroupRules.productGroupRate">
              <el-input v-model="item.taxRate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="含税单价" :prop="'list.'+index+'.taxPrice'" :rules="productGroupRules.productGroupNum">
              <el-input v-model="item.taxPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="零售价格" :prop="'list.'+index+'.price'" :rules="productGroupRules.productGroupPrice">
              <el-input v-model="item.price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>确定</el-button>
      </span>
      <select-supply v-if="selectSupplyVisible" ref="selectSupply" @refreshData="updateFormSupply"></select-supply>
      <select-brand v-if="selectBrandVisible" ref="selectBrand" @refreshData="updateFormBrand"></select-brand>
    </el-dialog>
  </div>
</template>

<script>
  import { remote } from '@/api/admin/dict'
  import {
    goodsGetObj,
    goodsAddObj,
    goodsPutObj,
    batchAddCtgSale3
  } from '@/api/eims/goods'
  import { filterParams } from '@/util/tools'
  import { goodsPriceList } from '@/api/eims/goods-price'
  import SelectSupply from '@/components/business/SearchSupply'
  import SelectBrand from '@/components/business/SearchBrand'

  export default {
    data() {
      return {
        ischeck: false,
        visible: false,
        type: '',
        bizData: {},
        priceGroup: [],
        goodsPriceGroup: [],
				unitTypeData: [],
        dataForm: {
          id: 0,
          ctgId: 3, //  类别
          ctgSaleId: 3, //  商品销售类别
          name: '', //  商品名称
          supplyId: '', //  供应商ID
          supplyName: '', //  供应商名称
          supplyCode: '',
          brandId: '', //  商品品种ID
          brandName: '', //  商品名称
          color: '',
          batchMirrorBallMin: '',
          batchMirrorBallMax: '',
          mirrorBallSpan: '',
          batchColumnMirrorMin: '',
          batchColumnMirrorMax: '',
          columnMirrorSpan: '',
          status: '', //  商品状态
          unitType: '', //  计量单位
          toTheLight: '', //下加光
          lensMaterial: '', //材料分类
          payType: '', //收费项目
          batchManagement: 0, //  批号管理
          photometricClassification: '', //光度分类
          lensFunction: '', //镜片功能
          refractiveIndex: '', //折射率
          list: [] //价格组
        },
        dataRule: {
          name: [{required: true, message: '名称不能为空', trigger: 'blur' }],
          supplyName: [{ required: true, message: '制造商不能为空', trigger: 'blur' }],
          brandName: [{ required: true, message: '商品品种不能为空', trigger: 'blur' }],
          unitType: [{ required: true, message: '计量单位不能为空', trigger: 'blur' }],
          lensMaterial: [{ required: true, message: '材料分类不能为空', trigger: 'blur' }],
          customizedMirrorBallMin: [{ required: true, message: '球镜下限不能为空', trigger: 'blur' }],
          customizedMirrorBallMax: [{ required: true, message: '球镜上限不能为空', trigger: 'blur' }],
          mirrorBallSpan: [{ required: true, message: '球镜跨度不能为空', trigger: 'blur' }],
          customizedColumnMirrorMin: [{ required: true, message: '柱镜下限不能为空', trigger: 'blur' }],
          customizedColumnMirrorMax: [{ required: true, message: '柱镜上限不能为空', trigger: 'blur' }],
          columnMirrorSpan: [{ required: true, message: '柱镜跨度不能为空', trigger: 'blur' }],
					color: [{ required: true, message: '商品编号不能为空', trigger: 'blur' }],
					toTheLight: [{ required: true, message: '下加光不能为空', trigger: 'blur' }],
					payType: [{ required: true, message: '收费项目不能为空', trigger: 'blur' }],
          // mirrorBall: [{ required: true, message: '球镜不能为空', trigger: 'blur' }],
          // columnMirror: [{ required: true, message: '柱镜不能为空', trigger: 'blur' }],

        },
        productGroupRules: {
          productGroupRate: [
            { required: true, message: '请填写该价格组税率', trigger: 'blur' },
            { trigger: 'blur', message: '税率必须为整数(1~2位数)', pattern: /^[1-9]\d{0,1}$/ }
          ],
          productGroupNum: [
            { required: true, message: '请填写含税价格', trigger: 'blur' },
            { trigger: 'change', message: '只能保留两位位小数', pattern: /^([1-9]\d*)(\.\d{0,2})?$/ }
          ],
          productGroupPrice: [
            { required: true, message: '请填写零售价格', trigger: 'blur' },
            { trigger: 'change', message: '只能保留两位位小数', pattern: /^([1-9]\d*)(\.\d{0,2})?$/ }
          ]
        },
        selectSupplyVisible: false,
        selectBrandVisible: false,
        mirrorBallOptions: [],
        columnMirrorOptions: [],
        lensFunction: [],
      }
    },
    components: {
      SelectSupply,
      SelectBrand
    },
    methods: {
      init(data) {
        this.bizData = this.$store.getters.bizData
				remote('unit_type').then(response => {
          if(response.data.code == '0'){
            this.unitTypeData = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
				})
        remote('lens_function').then(response => {
          if(response.data.code == '0'){
            this.lensFunction = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
        this.visible = true
        this.priceGroup = []
        this.dataForm.list = []
        this.getGoodsPriceList()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          // 获取球镜和柱镜范围
          remote('mirror_ball_enum').then(response => {
            if(response.data.code == '0'){
              this.mirrorBallOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
          remote('column_mirror_enum').then(response => {
            if(response.data.code == '0'){
              this.columnMirrorOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
          // dataForm表单中没有supplyId和brandId属性，无法自动重置，进行手动重置
          this.dataForm.supplyId = ''
          this.dataForm.supplyCode = ''
          this.dataForm.brandId = ''
          this.dataForm.brandCode = ''
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.ischeck = true
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.dataForm.list = this.priceGroup
            batchAddCtgSale3(filterParams(this.dataForm)).then(response => {
              if(response.data.code == '0'){
                this.$message.success('添加成功')
              }else{
                this.$message.error(response.data.msg)
              }
              this.ischeck = false
            }).catch(() => {
              this.ischeck = false
            })
          }else{
            this.ischeck = false
          }
        })
      },
      // 获取商品制造商信息
      getSupplyList() {
        let data = {
          ctgId: 3
        }
        this.selectSupplyVisible = true
        this.$nextTick(() => {
          this.$refs.selectSupply.init(data)
        })
      },
      // 更新表单制造商信息
      updateFormSupply(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
        this.dataForm.supplyCode = data.code
      },
      // 获取商品品种信息
      getBrandList() {
        if (!this.dataForm.supplyId) {
          this.$message.warning('请选择制造商')
          return false
        }
        let data = {
          ctgId: 3,
          supplyId: this.dataForm.supplyId
        }
        this.selectBrandVisible = true
        this.$nextTick(() => {
          this.$refs.selectBrand.init(data)
        })
      },
      //  更新表单品种信息
      updateFormBrand(data) {
        this.dataForm.brandId = data.id
        this.dataForm.brandName = data.name
        this.dataForm.name = data.name
        this.dataForm.brandCode = data.code
      },
      //  查询商品价格组列表
      getGoodsPriceList() {
        goodsPriceList().then(result => {
          let data = result.data.data
          data.forEach(item => {
            let obj = {}
            obj.priceGroupId = item.id
            obj.priceGroupName = item.groupName
            this.priceGroup.push(obj)
            this.dataForm.list.push(obj)
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .row-bg {
    background-color: #cadee8;
    padding-left: 15px;
    padding-top: 10px;
  }
</style>
